<template>
  <div>
    <el-dialog
      v-model="UserStore.dialogFormVisible"
      title="用户登录"
      @close="close"
    >
      <div class="contend">
        <el-row>
          <el-col :span="12">
            <div v-show="scene == 0">
              <el-form :model="userParmas" :rules="rules" ref="form">
                <el-form-item prop="phone">
                  <el-input
                    placeholder="请输入手机号码"
                    :prefix-icon="User"
                    v-model="userParmas.phone"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input
                    placeholder="请输入手机验证码"
                    :prefix-icon="Lock"
                    v-model="userParmas.code"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    :disabled="!isPhone || flag == true"
                    @click="getCode"
                  >
                    <coundow
                      v-if="flag"
                      :flag="flag"
                      @changeFlag="changeFlag"
                    ></coundow>
                    <span v-else>获取验证码</span>
                  </el-button>
                </el-form-item>
              </el-form>
              <el-button
                type="primary"
                style="width: 100%"
                :disabled="
                  isPhone && userParmas.code.length <= 6 ? false : true
                "
                @click="UserLogin"
                >立即登录</el-button
              >
            </div>
            <div v-show="scene == 1">
              <div id="login_container"></div>
            </div>

            <div class="bottom" @click="changeScene">
              <p>{{ scene == 0 ? "微信登录" : "手机号登录" }}</p>
              <svg
                v-show="scene == 0"
                t="1697456149974"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4070"
                width="32"
                height="32"
              >
                <path
                  d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                  fill="#28C445"
                  p-id="4071"
                ></path>
                <path
                  d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                  fill="#28C445"
                  p-id="4072"
                ></path>
              </svg>
              <svg
                v-show="scene == 1"
                t="1697458491225"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5986"
                width="32"
                height="32"
              >
                <path
                  d="M759.3984 29.7984 246.272 29.7984c-48.2304 0-87.3472 39.1168-87.3472 87.3472l0 791.552c0 48.2304 39.1168 87.3472 87.3472 87.3472l215.6544 0 119.9104 0 177.5616 0c48.2304 0 87.3472-39.1168 87.3472-87.3472l0-791.552C846.7456 68.9152 807.6288 29.7984 759.3984 29.7984zM418.304 92.0576l169.0624 0c8.3968 0 15.2576 6.8608 15.2576 15.2576s-6.8608 15.2576-15.2576 15.2576L418.304 122.5728c-8.3968 0-15.2576-6.8608-15.2576-15.2576S409.9072 92.0576 418.304 92.0576zM502.8864 894.6688c-33.9968 0-61.5424-27.5456-61.5424-61.5424 0-33.9968 27.5456-61.5424 61.5424-61.5424 33.9968 0 61.5424 27.5456 61.5424 61.5424C564.3264 867.1232 536.7808 894.6688 502.8864 894.6688zM782.848 667.0336c0 12.0832-9.728 21.8112-21.8112 21.8112L244.6336 688.8448c-12.0832 0-21.8112-9.728-21.8112-21.8112l0-464.896c0-12.0832 9.728-21.8112 21.8112-21.8112l516.3008 0c12.0832 0 21.8112 9.728 21.8112 21.8112L782.7456 667.0336z"
                  fill="#FF9000"
                  p-id="5987"
                ></path>
              </svg>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="left_contend">
              <div class="top">
                <div class="left">
                  <img src="../../assets/images/code_login_wechat.png" alt="" />
                  <svg
                    t="1697457048635"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4520"
                    width="22"
                    height="22"
                  >
                    <path
                      d="M183.379592 699.559184c-4.179592 0-8.359184-1.044898-11.493878-3.657143-6.269388-4.702041-9.404082-12.016327-7.836734-19.330612l13.061224-77.322449C136.881633 553.273469 114.938776 496.326531 114.938776 437.289796 114.938776 292.571429 246.073469 175.020408 408.032653 175.020408c76.8 0 149.420408 26.644898 204.8 74.710204 55.379592 48.587755 86.726531 113.893878 88.293878 183.379592 0 5.746939-2.089796 10.971429-6.269388 14.628572s-9.404082 5.746939-15.151021 5.746938c-5.22449-0.522449-9.404082-0.522449-13.583673-0.522449-112.326531 0-203.232653 79.934694-203.232653 178.677551 0 13.583673 1.567347 27.167347 5.22449 40.751021 1.567347 5.746939 0.522449 11.493878-2.612245 16.195918-3.134694 4.702041-8.359184 7.836735-14.106123 8.881633-14.106122 2.089796-28.734694 3.134694-43.363265 3.134694-52.767347 0-104.489796-12.538776-149.420408-36.571429l-65.828572 34.481633c-3.134694 0-6.269388 1.044898-9.404081 1.044898z"
                      fill="#0B9682"
                      p-id="4521"
                    ></path>
                    <path
                      d="M303.542857 352.653061m-35.004081 0a35.004082 35.004082 0 1 0 70.008163 0 35.004082 35.004082 0 1 0-70.008163 0Z"
                      fill="#DCFFFA"
                      p-id="4522"
                    ></path>
                    <path
                      d="M512 352.653061m-35.004082 0a35.004082 35.004082 0 1 0 70.008164 0 35.004082 35.004082 0 1 0-70.008164 0Z"
                      fill="#DCFFFA"
                      p-id="4523"
                    ></path>
                    <path
                      d="M849.502041 849.502041c-3.134694 0-6.269388-0.522449-9.404082-2.089796l-52.244898-27.167347c-37.093878 19.330612-78.889796 29.779592-122.253061 29.779592-134.269388 0-242.938776-98.220408-242.938776-218.383674S531.853061 412.734694 665.6 412.734694 909.061224 510.955102 909.061224 631.118367c0 48.065306-17.763265 95.085714-50.677551 133.22449l10.44898 61.64898c1.044898 7.314286-1.567347 15.15102-7.836735 19.330612-3.134694 3.134694-7.314286 4.179592-11.493877 4.179592z"
                      fill="#16C4AF"
                      p-id="4524"
                    ></path>
                    <path
                      d="M576.261224 575.738776m-29.779591 0a29.779592 29.779592 0 1 0 59.559183 0 29.779592 29.779592 0 1 0-59.559183 0Z"
                      fill="#DCFFFA"
                      p-id="4525"
                    ></path>
                    <path
                      d="M755.461224 575.738776m-29.779591 0a29.779592 29.779592 0 1 0 59.559183 0 29.779592 29.779592 0 1 0-59.559183 0Z"
                      fill="#DCFFFA"
                      p-id="4526"
                    ></path>
                  </svg>
                  <p>微信扫一扫快速关注"快速<br />预约挂号"</p>
                </div>
                <div class="right">
                  <img src="../../assets/images/code_app.png" alt="" />
                  <svg
                    t="1697457119642"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="5712"
                    width="22"
                    height="22"
                  >
                    <path
                      d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                      p-id="5713"
                      fill="#8a8a8a"
                    ></path>
                  </svg>
                  <p>扫一扫下载"预约挂号"<br />App</p>
                </div>
              </div>
              <div class="contend_item">
                <h1>尚医通官方指定平台</h1>
                <p>快速挂号 安全放心</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <el-button @click="closeForm">关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
//引入用户仓库
import useUserStore from "@/store/modules/User";
//引入验证码组件
import coundow from "@/components/coundow/index.vue";

//引入微信登录接口
import { reqWxLogin } from "@/api/User";
//引入图标组件
import { User, Lock } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

//获取用户仓库
let UserStore = useUserStore();
//控制手机登录与扫码登录的切换
let scene = ref<number>(0);
//定义用户手机号以及验证码
let userParmas = reactive({
  phone: "",
  code: "",
});
//控制验证码按钮的切换
let flag = ref<boolean>(false);
//获取form组件实例
let form = ref<any>();

//自定义手机号校验方法
const validatorPhone = (rule: any, value: string, callback: any) => {
  //处理冒红光问题，可以忽略此代码
  if (1 > 2) console.log(rule);
  //判断手机号是否合规
  let reg = /^1[3456789]\d{9}$/;
  if (reg.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的手机号"));
  }
};
//自定义校验验证码方法
const validatorCode = (rule: any, value: string, callback: any) => {
  //处理冒红光问题，可以忽略此代码
  if (1 > 2) console.log(rule);
  //如果验证码是数字，而且是等于六位数，那就放行
  if (/^\d{6}$/.test(value)) {
    callback();
  } else {
    callback(new Error("请输入正确的验证码"));
  }
};
//表单校验规则对象
let rules = reactive({
  phone: [
    // { required: true, message: '请输入正确的手机号', trigger: 'change',min:11 }
    { validator: validatorPhone, trigger: "change" },
  ],
  code: [
    // {required:true,message:'请输入正确的验证码',trigger:'change',min:6}
    { validator: validatorCode, trigger: "change" },
  ],
});
//切换场景的回调
const changeScene = async () => {
  scene.value = scene.value === 0 ? 1 : 0;
  //将当前网页进行编码
  let url = encodeURIComponent(window.location.origin + "/home");
  //发请求
  let result = await reqWxLogin(url);
  console.log(result);
  //http%3A%2F%2Fforum.atguigu.cn%2Fapi%2FweixinPc%2Fcallback
  //  解码
  let url2 = decodeURIComponent(
    "http%3A%2F%2Fforum.atguigu.cn%2Fapi%2FweixinPc%2Fcallback"
  );
  console.log(url2);

  //生成微信登录二维码的页面
  //@ts-ignore
  new WxLogin({
    self_redirect: true, //true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
    id: "login_container", //显示二维码容器设置
    appid: result.data.appid, //应用位置标识appid
    scope: "snsapi_login", //当前微信扫码登录页面已经授权了
    redirect_uri: result.data.redirectUri, //填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
    state: result.data.state, //state就是学校服务器重定向的地址携带用户信息
    style: "black",
    href: "",
  });
};
//关闭弹窗
const closeForm = () => {
  UserStore.dialogFormVisible = false;
};
//获取验证码的回调
const getCode = async () => {
  try {
    //如果验证码获取成功
    await UserStore.getCode(userParmas.phone);
    //收集数据
    userParmas.code = UserStore.userCode;
    //切换验证码按钮状态
    flag.value = true;
  } catch (error: any) {
    //验证码获取失败
    ElMessage({
      type: "error",
      message: error.message,
    });
  }
};
//计算用户的手机号是否合格
let isPhone = computed(() => {
  //手机号正则
  let reg = /^1[3456789]\d{9}$/;
  return reg.test(userParmas.phone);
});
//自定义事件
const changeFlag = (val: boolean) => {
  flag.value = val;
};
//用户登录按钮的回调
const UserLogin = async () => {
  //登录之前检验表单校验是否通过
  await form.value.validate();
  //调用仓库方法
  try {
    await UserStore.Login(userParmas);

    //提示
    ElMessage({
      type: "success",
      message: "登录成功",
    });
 
    //关闭弹窗
    closeForm();
  } catch (error) {
    //提示
    ElMessage({
      type: "error",
      message: (error as Error).message,
    });
  }
};
//关闭对话框的回调
const close = () => {
  //清除上一次数据
  Object.assign(userParmas, { phone: "", code: "" });
  //清除表单校验
  form.value.resetFields();
};
</script>

<style scoped lang="scss">
::v-deep(.el-dialog__body) {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.contend {
  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin: 10px 0px;
    }
  }
  .left_contend {
    margin-left: 30px;
    .top {
      display: flex;
      justify-content: space-between;
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 130px;
          height: 130px;
        }
        p {
          text-align: center;
          line-height: 20px;
        }
      }
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 130px;
          height: 130px;
        }
        p {
          text-align: center;
          line-height: 20px;
        }
      }
    }
  }
  .contend_item {
    text-align: center;
    font-size: 20px;
    //楷书
    font-family: KaiTi;

    line-height: 35px;
  }
}
#login_container {
  text-align: center;
}
</style>
